<template>
<div style=" height: 100%;max-height: 100%;">
    <div id="top">
        <h4>
           配置门店选择 
        </h4>
        <form role="form">
            <div class="form-group">
                <label>门店状态</label> 
                <select class="form-control" v-model="searchStatus">
                    <option value="">
                        请选择
                    </option>
                    <option value="done">
                        已经配置
                    </option>
                    <option value="todo">
                        等待配置
                    </option>
                </select>
                <label>输入关键字(名字) </label>
                <input v-model="searchKeyWord" class="form-control" placeholder="请输入"> </input>
            </div>
        </form>
        <h4>
           已选门店 ：{{ selectedShop ? selectedShop.name + ", " + selectedShop.id : "暂未选择" }} 
        </h4>
    </div>
    <div id="content" >
        <table style="display: table; overflow:auto;width:100%; position: relative;" >
            <thead style="display:table-row;  height: 50px;">
                <tr>
                    <th>编号</th>
                    <th>名字 </th>
                    <th>是否已经配置</th>
                </tr>
            </thead>
            <div style="max-height: 380px; overflow:auto; ">
                 <tr v-for="(x, key) in searchResult" :id="x.id" :class="{ selected: selectedShop && selectedShop.id == x.id }" @click.prevent.stop="select" >
                     <td>
                         {{x.id}}
                     </td>
                     <td>
                         {{x.name}}
                     </td>
                     <td>
                         <a :class="{ warning: (x.mac? false: true), badge: true } ">{{ x.mac ? "v": "x" }}</a>
                     </td>
                 </tr>
            </div>
        </table>
    </div>
    <div id="footer">
        <div>
            <router-link tag="button" to="selectProtector" class="btn btn-primary" @click.native="$store.commit('setStep',2)" :disabled="!selectedShop"> 下一步</router-link>
        </div>
    </div>
</div>
</template>

<script>
import axios from 'axios'
import {mapState} from 'vuex'


export default{ 
    name: "selectShop",
    data(){
        return { 
            searchKeyWord: "",
            searchStatus: "",
        }
    },
    methods: {
        select( e ){ 
            console.log( 'target: ', e.target);
            console.log( 'currentTarget: ', e.currentTarget );
            var id = e.currentTarget.id ;
            this.$store.commit( "setShop", this.shops[id] );
        }
        
    },
    computed: { 
        shops(){
            return this.$store.state.shops;
        },
        searchResult() {
            var ret = [];
            if( !this.shops ){
                return {}
            }
            console.log( "searchResult with: ", this.searchKeyWord,  " in ",  this.shops )
            for( let id in this.shops ) {
                if( this.shops[id].name.search( this.searchKeyWord ) >= 0 ) {
                    if(this.searchStatus == ''){
                        ret.push( this.shops[id] )
                    }else if(this.searchStatus == 'done' && this.shops[id].protector){
                        ret.push( this.shops[id] )
                    }else if(this.searchStatus == 'todo' && !this.shops[id].protector){
                        ret.push( this.shops[id] )
                    }
                }
            }
            console.log('after :', ret);
            return ret;
        },
        selectedShop(){
            return this.$store.state.shop;
        }
    },
}
</script>

<style scoped>
.selected{
    background-color:#0087da;
}
.badge{
    background-color: green;
}
.warning{
    background-color: red;
}



#top h4:nth-of-type(1){
    font-weight: bold;
    font-size: 20px;
    margin: 50px 0px 30px 30px;
}
#top h4:nth-of-type(2){
    font-size: 16px;
    margin: 0px 0px 30px 30px;
}
#top label{
    margin: 0px 30px 20px 30px;
}
#top .form-control{
    display: inline-block;
    width: 200px;
}
#top label{
    font-size: 18px;
}
#content{
    margin-left: 30px;
    margin-top: 50px;
    border: 1px solid #e1e1e1; 
    width: 600px;
    height: 440px;
    overflow: hidden;
}
thead, tbody{
    display:block;
}
#content th{
    width: 200px;
    height: 50px;
    text-align: center;
    background-color: #f2f2f2;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
}
#content td{
    width: 200px;
    height: 50px;
    text-align: center;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
}

#footer{
    margin-left: 30px;
    margin-top: 50px;
}
#footer .btn{
    display: block;
    margin: 0 auto;
}
</style>